<template>
  <div class="app-container">

    <el-button type="primary" @click="handleAddRole">新增</el-button>
    <!-- <el-select v-model="searchTd" placeholder="请选择">
    <el-option
      v-for="item in searchType"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select> -->
    <!-- <el-input v-model="searchInput" style="width:150px" placeholder="请输入内容"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
    <el-button type="primary"   @click="chongzhi">重置</el-button> -->
    <div style="height:650px;overflow: auto;">
      <el-table :data="rolesList" v-loading='loading' style="width: 100%;margin-top:30px;" border>
        <el-table-column width="80" label="ID">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="特征码名称">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column label="特征码">
          <template slot-scope="scope">
            {{ scope.row.detailsaddr}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">修改</el-button>
            <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <el-pagination background layout="prev, pager, next,sizes,total" :total='total' @current-change='current_change' @size-change='size_change' style="text-align: center; margin-top: 60px;" :page-sizes="[10, 50, 100, 1000]">
    </el-pagination>

    <el-dialog title="修改" :visible.sync="dialogVisible" width="30%">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" v-loading='loading'>

        <el-form-item label="特征码名称：" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="特征码：" prop="detailsaddr">
          <el-input v-model="ruleForm.detailsaddr" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePublish">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import api from '@/api/featureCode'

export default {
  name: 'gameList',

  data() {
    return {
      dialogVisible: false,
      rolesList: [],
      total: 0,
      limit: 10, // 默认10条
      page: 1, // 当前页码
      loading: false,
      ruleForm: {
        username: '',
        detailsaddr: '',
        id: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入特征码名称', trigger: 'blur' }
        ],
        detailsaddr: [
          { required: true, message: '请输入特征码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    handlePublish() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.loading = true
          api
            .update(this.ruleForm)
            .then(res => {
              if (res.data.errno == 0) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.getList()
              } else {
                this.loading = false
                this.$message({
                  message: '保存失败...',
                  type: 'warning'
                })
              }
            })
            .catch(e => {
              this.loading = false
            })
        } else {
          this.$message({
            message: '请检查数据必填项',
            type: 'warning'
          })
          return false
        }
      })
    },
    handleAddRole() {
      this.$router.push({ path: './create' })
    },
    handleEdit(e) {
      this.dialogVisible = true
      this.ruleForm.username = e.username
      this.ruleForm.detailsaddr = e.detailsaddr
      this.ruleForm.id = e.id
    },
    boxgametop(e) {
      this.$router.push({ path: './banner', query: { id: e.id }})
    },
    handleDelete(e) {
      api.Delete(e).then(res => {
        if (res.data.errno == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },
    current_change(e) {
      this.page = e
      this.getList()
    },
    size_change(e) {
      this.limit = e
      this.getList()
    },
    chongzhi() {
      this.getList()
    },
    getList() {
      this.loading = true
      api
        .list({
          limit: this.limit,
          page: this.page
        })
        .then(res => {
          if (res.data.errno == 0) {
            this.rolesList = res.data.data.list
            this.total = res.data.data.total
            this.limit = res.data.data.limit
            this.page = res.data.data.page
            this.loading = false
          }
        })
        .catch(() => {
          this.Loading = false
        })
    }
  }
}
</script>
